/**
 * 藏馆接收
 */

import React, { useEffect, useState } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-components';
import { Card, Table, Button, Row, Popconfirm, Typography, message } from 'antd';
import { connect } from 'umi';
import { ifPermission } from '@/utils';
import Add from './components/Add';
import Edit from './components/Edit';

const LibraryReception = ({ dispatch }) => {
  const [loading, setLoading] = useState(false);
  const [addVisible, setAddVisible] = useState(false);
  const [editVisible, setEditVisible] = useState(false);
  const [list, setList] = useState([]);
  const [listItemInfo, setListItemInfo] = useState({});

  useEffect(() => {
    getList(); // 初始获取列表数据
  }, []);

  // 获取列表
  const getList = () => {
    setLoading(true); // 开启loading
    dispatch({
      type: 'demo/fetchGetList',
      payload: { userName: '嘉图' },
      callback: (res) => {
        setLoading(false); // 关闭loading
        if (res && (res.msg || res.code)) {
          return;
        }
        setList(res.dataList);
      },
    });
  };

  // 新增
  const addModal = () => {
    setAddVisible(true);
  };

  // 编辑
  const editModal = (record) => {
    dispatch({
      type: 'demo/fetchListItemDetail',
      payload: { id: record.id },
      callback: (res) => {
        if (res && (res.msg || res.code)) {
          return;
        }
        setListItemInfo(res);
        setEditVisible(true);
      },
    });
  };

  // 删除
  const remove = (record) => {
    dispatch({
      type: 'demo/fetchRemove',
      payload: { id: record.id },
      callback: (res) => {
        if (res && (res.msg || res.code)) {
          return;
        }
        message.success('删除成功！');
      },
    });
  };

  const columns = [
    {
      title: '姓名',
      dataIndex: 'userName',
      key: 'userName',
    },
    {
      title: '账号',
      dataIndex: 'account',
      key: 'account',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      width: 150,
      render: (_, record) => (
        <>
          {ifPermission('ui-norm.libraryreception.all') && (
            <>
              <Button
                type="link"
                style={{ padding: '4px 5px', marginRight: '10px' }}
                onClick={() => {
                  editModal(record);
                }}
              >
                编辑
              </Button>
              <Popconfirm
                title="请确认是否删除该数据？"
                onConfirm={() => remove(record)}
                okText="确定"
                cancelText="取消"
              >
                <Typography.Link>删除</Typography.Link>
              </Popconfirm>
            </>
          )}
        </>
      ),
    },
  ];

  // 自定义面包屑
  const breadRoutes = {
    routes: [
      {
        path: '/preservation',
        breadcrumbName: '保藏',
      },
      {
        path: '/libraryreception',
        breadcrumbName: '藏馆接收',
      },
    ],
    itemRender: (route) => <span>{route.breadcrumbName}</span>,
    separator: '>',
  };

  return (
    <PageHeaderWrapper breadcrumb={breadRoutes}>
      <Card>
        {ifPermission('ui-norm.libraryreception.all') && (
          <Row style={{ display: 'flex', justifyContent: 'right', marginBottom: '10px' }}>
            <Button type="primary" onClick={() => addModal()}>
              新增
            </Button>
          </Row>
        )}
        <Table
          rowKey={(record) => record && record.id}
          size="small"
          loading={loading}
          columns={columns}
          dataSource={list}
        />
        {addVisible && (
          <Add
            dispatch={dispatch}
            addVisible={addVisible}
            onCancel={() => setAddVisible(false)}
            getList={getList}
          />
        )}
        {editVisible && (
          <Edit
            dispatch={dispatch}
            editVisible={editVisible}
            listItemInfo={listItemInfo}
            onCancel={() => setEditVisible(false)}
            getList={getList}
          />
        )}
      </Card>
    </PageHeaderWrapper>
  );
};

export default connect(({}) => ({}))(LibraryReception);
